/**
  学习目标：在React中使用Redux维护状态
  步骤：
     1. 导入store
     */
     import { useEffect, useState } from 'react';
     import store from '../store';
     
     export default function App() {
       const [show, setShow] = useState(true);
       return (
         <div>
           <h1>Redux基础案例</h1>
           <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
           {show ? <Son /> : null}
         </div>
       );
     }
     
     function Son() {
       // 2. 使用store中的状态作为useState的初始值
       const [count, setCount] = useState(store.getState().count);
     
       useEffect(() => {
         // 5. 类似缓存，监听仓库变化，将仓库变化实时同步给React组件
         const unSubscribe = store.subscribe(() => {
           setCount(store.getState().count);
         });
         // 6. 卸载时取消监听
         return () => {
           unSubscribe();
         };
       }, []);
       return (
         <div>
           <h2>子组件</h2>
           {/* 3. 从取出仓库state中的count */}
           <h2>count:{count}</h2>
           {/* 4. 使用store.dispatch()修改store中的数据 */}
           <button onClick={() => store.dispatch({ type: 'add' })}>+1</button>
           <button onClick={() => store.dispatch({ type: 'des' })}>-1</button>
         </div>
       );
     }
     